﻿<br />
<div class="col-sm-3 well">
    <img class="AddSuperImage" id="SuperImage" />
</div>
<form class="well col-sm-offset-1  container col-sm-4" id="superForm">
    <div class="form-group">
        <label for="inputName">Name</label>
        <input id="inputName" class="form-control" />
    </div>
    <div class="form-group">
        <label for="inputImage">Image Url</label>
        <input id="inputImage" class="form-control" />
    </div>
    <div class="form-group">
        <label for="inputDesc">Description</label>
        <textarea class="form-control" id="inputDesc"></textarea>
    </div>
    <div class="form-group">
        <label for="inputEvil">Are They Evil?</label>
        <input type="checkbox" id="inputEvil" class="form-control" />
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-info">Submit</button>
    </div>
</form>
<script>
    $(document).ready(function () {
        $('#superForm').submit(function (e) {
            e.preventDefault();
            AddSuper();
        });
    });
    var timer;
    $('#inputImage').on('change', function (e) {
        //clearTimeout(timer);
        //timer = setTimeout(function () {
        var url = $('#inputImage').val();
        $('#SuperImage').attr("src", url);
        //}, 200);
    });

    var AddSuper = function () {
        var superPerson = {
            Name: $('#inputName').val(),
            Description: $('#inputDesc').val(),
            ImageUrl: $('#inputImage').val(),
            IsEvil: $('#inputEvil').val()
        };
        
        $.ajax({
            contentType: 'application/json',
            url: '/api/apisuper',
            method: 'POST',
            data: JSON.stringify(superPerson)
        }).success(function (data) {
            window.location.replace('http://localhost:5407/');
        }).error(function (data) {
            alert(data.responseText);
        });
        
    }
</script>